<template>
  <div  ref="domref">
    
  </div>
</template>

<script setup>

import {onMounted} from 'vue'


const init=()=>{
  // 加载组件
  layui.config({
    layimPath: '/layui/', // 配置 layim.js 所在目录
    layimResPath: '/layui/res/', // layim 资源文件所在目录
    version: '4.0.1'
  }).extend({
    layim: layui.cache.layimPath + 'layim' //  配置 layim 组件所在的路径
  }).use('layim', function (layim) {

    // 基础配置
    layim.config({
      // 初始化数据，可采用 URL 接口或直接赋值两种方式
      init: {
        url: layui.cache.layimResPath + './getInit.json', // 若采用 URL，则 init 可同 jQuery.ajax() 参数选项
      },
      // 设置 iframe 页面地址
      pageurl: {
        // 消息盒子页面地址。若不开启，剔除该项即可
        msgbox: layui.cache.layimResPath + 'html/msgbox.html',
        // 发现页面地址。若不开启，剔除该项即可
        find: layui.cache.layimResPath + 'html/find.html',
        // 通过函数设置聊天记录页面地址。若不开启，剔除该项即可
        chatlog: function (data) {
          var receiver = data.receiver; // 当前聊天对象
          var url = layui.cache.layimResPath + 'html/chatlog.html';
          return url + '?type=' + receiver.type + '&id=' + receiver.id;
        }
      },

    });

    // // 扩展聊天工具栏
    layim.extendChatTools([
      {
        name: 'image',
        title: '上传图片',
        icon: 'layui-icon-picture-fine',
        onClick: 'file',  // 此处的 file 为内置工具
        ajax: {} // 设置上传图片接口，同 jQuery.ajax() 参数选项
      },
      {
        name: 'file',
        title: '上传文件',
        icon: 'layui-icon-layim-uploadfile',
        onClick: 'file',
        ajax: {} // 设置上传图片接口，同 jQuery.ajax() 参数选项
      },
      {
        name: 'video',
        title: '插入视频 URL',
        icon: 'layui-icon-video',
        onClick: 'remoteMedia'  // 此处的 remoteMedia 为内置工具
      },
      {
        name: 'audio',
        title: '语音消息',
        icon: 'layui-icon-mike',
        onClick: function (obj) {
          layer.msg('2 秒后模拟发送语音消息', {
            time: 2000
          }, function () {
            var text = '!audio(URL)'; // 音频消息特定格式 | 视频格式：!video(URL)
            layim.sendMessage(text); // 发送消息
          });
        }
      },
      {
        name: 'code',
        title: '插入代码',
        icon: 'layui-icon-fonts-code',
        onClick: function (obj) { // 自定义事件操作
          layer.prompt({
            title: '插入代码',
            formType: 2
          }, function (text, index) {
            layer.close(index);
            text = ['```', text, '```'].join('\n'); // 拼接成默认内容解析器支持的 code 结构
            obj.insert(text); // 将文本插入到编辑器
          });
        }
      },
      {
        name: 'shortcut',
        title: '快捷语',
        icon: 'layui-icon-list',
        onClick: function (obj) {
          layui.dropdown.render({
            elem: obj.elem,
            data: [
              { title: '写一篇 50 字左右的正能量小说' },
              { title: 'Layui table 的详细用法' },
              { title: '1+1=?' },
              { title: '翻译：我想通了' },
              { title: '[link text](https://bing.com)' },
              { title: '![starrysky](https://unpkg.com/outeres@0.1.3/demo/carousel/720x360-5.jpg)' },
              { title: '!file[starrysky.jpg](https://unpkg.com/outeres@0.1.3/demo/carousel/720x360-5.jpg)' },
            ],
            show: true,
            click: function (data) {
              obj.insert(data.title); // 将文本插入到编辑器
            }
          })
        }
      }
    ]);


    // 事件 - 在线状态的切换事件
    layim.on('online', function (obj) {
      console.log(obj);
    });

    // 事件 - 签名修改
    layim.on('sign', function (obj) {
      console.log(obj);
    });

    // 事件 - layim建立就绪
    layim.on('ready', function (cache) {
      // console.log(cache);
      layim.setMsgboxCount(5); // 模拟消息盒子的新消息数量。实际使用时，一般是动态获得

      // 向主面板添加群组
      layim.addContacts({
        type: 'group',
        avatar: "",
        groupname: '前端开发',
        id: "12333333",
        members: 0
      });

      // 向主面板添加好友（如果检测到该 socket）
      layim.addContacts({
        type: 'friend',
        avatar: layim.cache().options.defaultAvatar, // 这里赋值默认头像，实际使用时请改成正式头像地址
        username: '测试222',
        gid: 2,
        id: "1233333312121212",
        sign: "签名信息"
      });

      // 模拟接受消息
      // 实际使用时可将下述 setTimeout 换成 WebSocket
      setTimeout(function () {
        // 好友的消息
        layim.getMessage({
          username: "测试1",
          avatar: "",
          id: "100001",
          type: "friend",
          mid: Math.random() * 100000 | 0, // 模拟消息 id，会赋值在 li 的 data-mid 上，以便完成一些消息的操作（如撤回），可不填
          content: "这是模拟接受的一段测试消息。标记：" + new Date().getTime()
        });
      }, 1500);
    });

    // 事件 - 发送消息
    layim.on('sendMessage', function (data) {

      var user = data.user; // 我
      var receiver = data.receiver; // 对方

      // 普通聊天模式
      if (receiver.type === 'friend') {
        layim.setChatStatus('<span style="color:#FF5722;">对方正在输入…</span>');
      }

      // 演示自动回复
      setTimeout(function () {
        // 自动回复文本
        var autoReplay = [
          '模拟消息 1',
          '模拟消息 2',
          '模拟消息 3',
          '模拟消息 4',
          '模拟消息 5',
          '模拟消息 6',
          '模拟消息 7',
          '模拟消息 8',
          '模拟消息 9'
        ];
        var obj = {};
        if (receiver.type === 'group') {
          obj = {
            username: '模拟群员 ' + (Math.random() * 100 | 0),
            avatar: layim.cache().options.defaultAvatar, // 这里赋值默认头像，实际使用时请改成正式头像地址
            id: receiver.id,
            type: receiver.type,
            content: autoReplay[Math.random() * 9 | 0]
          }
        } else {
          obj = {
            username: receiver.username,
            avatar: receiver.avatar,
            id: receiver.id,
            type: receiver.type,
            content: autoReplay[Math.random() * 9 | 0]
          };
          layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
        }
   
        layim.getMessage(obj);
      }, 1000);
    });

    // 事件 - 查看群员
    layim.on('viewMmembers', function (data) {
      var receiver = data.receiver; // 当前聊天对象

      // 请求群员接口，此处为静态模拟数据
      data.ajax({
        url: './getMembers.json', // 实际使用时应换成真实接口
        data: {
          id: receiver.id
        },
        success: function (res) {
          data.render(res.data); // 渲染群员列表
        }
      });
    });

    // 事件 - 聊天窗口的切换
    layim.on('chatChange', function (res) {
      var type = res.data.type;
      if (type === 'friend') {
        // 模拟标注好友状态
        // layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
      } else if (type === 'group') {
        //模拟系统消息
        layim.getMessage({
          system: true,
          id: res.data.id,
          type: "group",
          content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊',
          saveLocalChatlog: false // 不保存该消息到本地聊天记录
        });
      }
    });

    // 事件 - 更换背景图
    layim.on('backgroundImage', function (obj) {
      console.log(obj)
    });


  });
}
onMounted(()=>{
init()
})

</script>

<style lang="scss" scoped></style>